<template>
  <div>
    <pageMain padding="0px " v-loading="pageLoading">
      <div class="overall-table-screen-options">
        <div class="overall-table-screen-options-left">
          <ul class="overall-table-screen-options-left-ul">
            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                角色名
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-input
                  size="mini"
                  v-model="pageData.where.username"
                  placeholder="请输入角色名"
                ></el-input>
              </div>
            </li>
            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                权限标识
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-input
                  size="mini"
                  v-model="pageData.where.username"
                  placeholder="请输入权限标识"
                ></el-input>
              </div>
            </li>

            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                状态
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-select
                  size="mini"
                  v-model="pageData.where.reliable"
                  placeholder="角色状态"
                >
                  <el-option
                    v-for="state in $dictionary.get('ROLE_STATE')"
                    :label="state.label"
                    :value="state.value"
                    :key="state.value"
                  ></el-option>
                </el-select>
              </div>
            </li>
          </ul>
        </div>

        <ul
          class="overall-table-screen-options-right overall-table-screen-options-right-row"
        >
          <li
            class="overall-table-screen-options-right-li"
            @click="clickSearch"
          >
            <el-button size="mini" plain type="primary" icon="el-icon-search"
              >搜索</el-button
            >
          </li>
          <li class="overall-table-screen-options-right-li" @click="clickReset">
            <el-button size="mini" plain type="primary" icon="el-icon-refresh"
              >重置</el-button
            >
          </li>
        </ul>
      </div>

      <div class="overall-table-surround">
        <div class="overall-table-surround-options">
          <div class="overall-table-surround-options-left">
            <el-button size="mini" plain type="warning" icon="el-icon-refresh"
              >全选</el-button
            >
            <el-button size="mini" plain type="danger" icon="el-icon-refresh"
              >批量删除</el-button
            >
          </div>
          <div class="overall-table-surround-options-right">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="clickAddRole"
              >添加新角色</el-button
            >
          </div>
        </div>
        <div class="overall-table-surround-table">
          <el-empty v-if="!pageData.list.length"></el-empty>

          <el-table
            v-else
            :size="tableSize"
            :border="tableBorder"
            :data="pageData.list"
            stripe
            highlight-current-row
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="角色"
              width="200"
            ></el-table-column>
            <el-table-column prop="scope" label="角色标识"></el-table-column>

            <el-table-column prop="comment" label="备注"></el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                {{ $dictionary.extend("ROLE_STATE", scope.row.state) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              fixed="right"
              label="操作"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <div class="user-options overall-flex">
                  <el-link
                    type="warning"
                    @click="clickLookUser(scope.row, scope.$index)"
                    >查看</el-link
                  >
                  <el-link
                    type="primary"
                    @click="clickEditUser(scope.row, scope.$index)"
                    >编辑</el-link
                  >
                  <el-link
                    type="danger"
                    @click="clickRemoveUser(scope.row, scope.$index)"
                    >删除</el-link
                  >
                </div>
              </template></el-table-column
            >
          </el-table>
        </div>
      </div>

      <div class="overall-table-pagination">
        <div class="overall-table-pagination-left">
          <el-select v-model="pageData.limit" placeholder="请选择" size="mini">
            <el-option
              v-for="item in pageLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="overall-table-pagination-right">
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </pageMain>

    <el-dialog width="30%" title="添加角色" :visible.sync="RoleDialogShow">
      <el-form
        ref="form"
        :model="addDicForm"
        label-width="130px"
        label-position="left"
      >
        <el-form-item label="角色名称">
          <el-input
            v-model="addRoleForm.name"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input
            v-model="addRoleForm.scope"
            placeholder="请输入唯一权限标识"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="addRoleForm.comment"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <templates slot="footer">
        <el-button @click="cancelAddRole">取消</el-button>
        <el-button type="primary" @click="sumbitAddRole">添加角色</el-button>
      </templates>
    </el-dialog>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";
import RoleApi from "@/api/role";
import tableAttrMixin from "@/mixins/table_attr";
import loadingMixin from "@/mixins/loading";

export default {
  mixins: [loadingMixin, tableAttrMixin],
  components: {
    pageMain,
  },
  methods: {
    cancelAddRole() {
      this.RoleDialogShow = false;
    },
    sumbitAddRole() {
      let { name, scope, comment } = this.addRoleForm;

      RoleApi.add({
        name,
        scope,
        comment,
      })
        .then((res) => {
          let { msg } = res;
          this.$message({
            message: msg,
            type: "success",
          });
          this.getRoleList()
        })
        .catch((err) => {
          let { msg } = err;
          this.$message.error(msg);
        })
        .finally(() => {});
    },
    // 点击查询
    clickSearch() {
      this.pageData.page = 1;
      this.getRoleList();
    },
    clickReset() {
      this.pageData.page = 1;
      for (let item of Object.keys(this.pageData.where)) {
        this.pageData.where[item] = null;
      }
      this.getRoleList();
    },
    // 点击查看用户
    clickLookUser(item, index) {
      console.log(item, index);
      this.$router.push("/userManagement/roleManagement/info?role=" + item.id);
    },
    // 点击添加角色
    clickAddRole() {
      this.RoleDialogShow = true;
    },
    // 获取角色列表
    getRoleList() {
      this.pageLoading = true;
      let { page, limit, where } = this.pageData;
      RoleApi.list({ page, limit, where })
        .then((res) => {
          let { data } = res;
          this.pageData.list = [];
          this.pageData.list = data;
        })
        .catch((err) => {
          this.$message({ type: "error", message: err.msg });
        })
        .finally(() => {
          this.pageLoading = false;
        });
    },
    // 点击删除用户
    clickRemoveUser(item, index) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return RoleApi.remove({ id: item.id });
        })
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.tableData.splice(index, 1);
        })
        .catch((err) => {
          console.log(err);
          if (typeof err != "string") {
            this.$message({
              message: err.msg,
              type: "error",
            });
          }
        });
    },
  },

  created() {
    this.getRoleList();
  },

  data() {
    return {
      RoleDialogShow: false,
      addRoleForm: {
        name: "", // 角色名称
        scope: "", // 权限标识
        state: 1, // 状态
        comment: "", // 备注
      },
      pageData: {
        page: 1,
        limit: 10,
        total: null,
        where: {
          mobile: "",
          username: "",
          nickname: "",
          gender: null,
          state: null,
          role: null,
        },
        list: [],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}
.pagination {
  margin: 10px 0px;
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.user-options {
  justify-content: space-around;
}
.where-list {
  gap: 35px;
  margin-bottom: 10px;
}
</style>
